<template>
	<view class="space">
		<z-paging ref="paging" v-model="mhList" @query="queryList">
			<!-- 轮播 -->
			<view class="banner">
				<swiper autoplay="true" circular="true" class="swiper" indicator-active-color="white">
					<swiper-item class="swiper_item" v-for="(item, index) in bannerData" :key="item.id">
						<image @click="nextPage(item)" class="swiper_image" :src="item.image"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="anniu_box">
				<view class="dange_an_box" v-for="(item, index) in gnList" :key="index" @click="tiaozhuan(item)">
					<image :src="item.img" mode="scaleToFill" />
				</view>
			</view>
			<view class="big_box">
				<view @click="goxq(item.id)" class="box_item" v-for="item in mhList" :key="item.id">
					<image mode="aspectFill" :src="item.image" class="box_image"></image>
					<view class="box-bottom">
						<view class="box-title">{{ item.name }}</view>
						<view class="box-info">
							<view class="box-price">￥{{ item.price }}</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>

		<!-- 活动弹窗 -->
		<uni-popup class="popup" v-show="popData.length" v-for="(item, index) in popData" :key="item.id"
			:ref="'popup' + index" :mask-click="false">
			<image mode="widthFix" @click="nextPage(item)" class="pop_image" :src="item.image"></image>
			<image class="close_pop" @click.stop="closePop('popup' + index, index)"
				src="https://www.dingxians.cn/upload/images/box/close.png"></image>
		</uni-popup>
		<!-- 强更弹窗 -->
		<uni-popup class="app_popup" v-show="showVersion" mode="center" ref="update_app" :mask-click="false">
			<view class="pop_box">
				<image class="pop_bg" mode="widthFix" src="http://www.dingxians.cn/upload/20230830/64eeb4f594a71.png">
				</image>
				<view class="pop_version">
					<view class="pop_header">发现新版本 {{ versionData.version_no }}</view>
					<text class="pop_content">{{ versionData.content }}</text>
				</view>
				<view class="rate" v-if="downStatus">
					<view class="rate_image">
						<liu-progressbar :bgColor="'#A361F6'" :progress="percentVal" dsColor="#ccc" color="#FFFFFF"
							:height="'15rpx'" />
					</view>
					<view class="rate_value">{{ percentVal }}%</view>
				</view>
				<view class="down_btn_group" v-else>
					<view class="down_btn down" @click="updateApp()">更新</view>
				</view>
			</view>
		</uni-popup>
		<view class="stars">
			<view class="star"></view>
			<view class="star pink"></view>
			<view class="star blue"></view>
			<view class="star yellow"></view>
		</view>
	</view>
</template>
<script>
	import api from '../../api/index.js'
	import loadmore from '../../components/a_loadMore/a_loadMore.vue'
	export default {
		components: {
			loadmore
		},
		data() {
			return {
				loadStatus: 'normal', //加载状态down,loading,normal
				autoplay: true,
				interval: 2000,
				duration: 500,
				bannerData: [], //轮播列表
				version_no: '',
				showVersion: false,
				percentVal: 0,
				versionData: {},
				mask: true,
				downStatus: false,
				gnList: [{
						id: 1,
						img: 'https://www.dingxians.cn/upload/20240812/66ba01e37a49b.png',
						url: '/pages/activity/sign'
					},
					{
						id: 2,
						img: 'https://www.dingxians.cn/upload/20240812/66ba01e37acb5.png',
						url: '/packageA/welfare/index'
					},
					{
						id: 3,
						img: 'https://www.dingxians.cn/upload/20240812/66ba01e376ea3.png',
						url: '/packageA/tower/index'
					},
					{
						id: 4,
						img: 'https://www.dingxians.cn/upload/20240812/66ba01e376584.png',
						url: '/pages/compound/index'
					},
				],

				tabId: 1, //类型
				page: 1, //分页
				mhList: [], //盲盒列表
				refreshStatus: false, //防抖
				popData: [], //弹窗
			}
		},
		onShow() {
		},
		onLoad() {
			// if (uni.getStorageSync('lower') == '1' || this.mhList.length == 1) {
			//  this.mhList = []
			//  this.getDatas()
			//  uni.setStorageSync('lower', '0')
			// }
			this.Banners()
			this.getPopss()
			// #ifdef APP-PLUS
			this.getVersions()
			// #endif
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.loadStatus = 'loading'
				api.blindBox
					.index({
						cat_id: this.tabId,
						page: pageNo,
						limit: pageSize

					})
					.then((res) => {
						// uni.hideLoading()
						this.loadStatus = 'down'
						// this.refreshStatus = false
						if (res.code === 200) {
							console.log(res, "resresresres")
							this.$refs.paging.complete(res.data.data)
							// this.lastPage = res.data.last_page
							// this.mhList.push(...res.data.data)
						}
					})
					.catch((error) => {
						// this.refreshStatus = false
						console.log(error)
					})
			},
			// 更新
			updateApp() {
				this.mask = false
				if (this.type === 'android') {
					this.androidUpdate()
					this.downStatus = true
				} else if (this.type === 'ios') {
					this.iosUpdate()
				}
			},
			// 关闭弹窗
			closePop(popup, index) {
				this.$refs[popup][0].close()
				let len = this.popData.length - 1
				if (index < len) {
					let i = index + 1
					let popup = `popup${i}`
					setTimeout(() => {
						this.$refs[popup][0].open('center')
					}, 500)
				}
			},
			// 安卓更新
			androidUpdate() {
				let file_size = this.versionData.file_size
				const dtask = plus.downloader.createDownload(this.versionData.url, {}, function(d, status) {
					// 下载完成
					if (status === 200) {
						plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, (error) => {
							this.show('安装成功')
						})
					} else {
						this.show('安装失败')
					}
				})
				dtask.start()

				let timer = setInterval(() => {
					let percent = (dtask.downloadedSize / file_size).toFixed(2) // fileSize文件总大小，后端返回的
					this.percentVal = Math.floor(percent * 100) // 转成整数展示
					if (percent >= 1) {
						// 注意百分比，及时清除定时器即可
						clearInterval(timer)
						this.showVersion = false
						this.$refs.pop.close()
					}
				}, 18)
			},
			// ios跳转appstore
			iosUpdate() {
				plus.runtime.launchApplication({
						action: `${this.versionData.url}`,
					},
					function(e) {
						console.log('Open system default browser failed: ' + e.message)
					},
				)
			},
			// app查看版本
			getVersions() {
				// #ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
					this.version_no = wgtinfo.version
					console.log(this.version_no)
					this.checkVersion()
				})
				// #endif
			},
			// 查看版本
			checkVersion() {
				let ua = uni.getSystemInfoSync().platform
				if (/ios/i.test(ua)) {
					this.type = 'ios'
				} else if (/android/i.test(ua)) {
					this.type = 'android'
				}
				api.versions
					.check({
						refresh: 1,
						type: this.type,
						version_no: this.version_no,
					})
					.then((res) => {
						console.log(res,"duihi")
						if (res.code === 200) {
							this.versionData = res.data
							if (res.data.status === 0) {
								uni.setStorageSync('update_app', 0)
							} else {
								this.showVersion = true
								this.$refs.update_app.open('center')
								uni.setStorageSync('update_app', 1)
							}
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			// 弹窗
			getPopss() {
				api.pops
					.index()
					.then((res) => {
						if (res.code === 200) {
							this.popData = res.data.data
							if (this.popData.length > 0) {
								this.$nextTick(() => {
									this.$refs.popup0[0].open('center')
								})
							}
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			// 功能页面跳转
			tiaozhuan(item) {
				uni.navigateTo({
					url: item.url
				})
			},
			// 跳转盲盒详情
			goxq(id) {
				uni.navigateTo({
					url: '/pages/index/detail?id=' + id
				})
			},
			// 轮播，弹窗跳转
			nextPage(item) {
				if (item.url && item.login) {
					this.header(item.url, 1, true)
				} else if (item.url && !item.login) {
					this.header(item.url)
				}
			},
			// 盲盒列表
			// getDatas() {
			//  // uni.showLoading({
			//  //  title: '数据加载中',
			//  // })
			//  this.loadStatus = 'loading'
			//  api.blindBox
			//      .index({
			//          cat_id: this.tabId,
			//          page: this.page,
			//      })
			//      .then((res) => {
			//          // uni.hideLoading()
			//          this.loadStatus = 'down'
			//          // this.refreshStatus = false
			//          if (res.code === 200) {
			//              this.lastPage = res.data.last_page
			//              this.mhList.push(...res.data.data)
			//          }
			//      })
			//      .catch((error) => {
			//          this.refreshStatus = false
			//          uni.hideLoading()
			//          console.log(error)
			//          if (!this.isError) {
			//              this.isError = true
			//              setTimeout(() => {
			//                  this.getBanners()
			//              }, 3500)
			//          }
			//      })
			// },
			// 轮播图
			Banners() {
				api.banners
					.index()
					.then((res) => {
						if (res.code === 200) {
							this.bannerData = res.data
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}
		}
	}
</script>

<style lang="scss">
	.app_popup {
		.pop_box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 600rpx;
			height: 600rpx;
			border-radius: 10rpx;
			position: relative;

			.pop_bg {
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}

			.pop_version {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-top: 100rpx;
				margin-left: 60rpx;

				.pop_header {
					color: #fff;
				}

				.pop_content {
					// padding: 0 20rpx;
					margin-top: 120rpx;
				}
			}

			.rate {
				width: 550rpx;
				margin: 0 auto;
				align-items: center;
				display: flex;

				.rate_image {
					width: 500rpx;
					margin-right: 10rpx;
				}
			}

			.down_btn_group {
				display: flex;
				justify-content: space-around;
				align-items: center;

				.down_btn {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 24rpx;
					border-radius: 10rpx;

					&.cancel {
						background-color: #ccc;
						color: #999;
					}

					&.down {
						background-color: #a361f6;
						color: #fff;
					}
				}
			}
		}
	}

	.popup {
		z-index: 1000;
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: transparent;

		.pop_image {
			width: 600rpx;
		}

		.close_pop {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			bottom: -100rpx;
			left: 270rpx;
			z-index: 5;
		}
	}

	.space {
		width: 100%;
		height: 100vh;
		background-image: url('https://www.dingxians.cn/upload/20240731/66a9d6bc189f5.jpg');
		background-size: 100% 100%;
		overflow: hidden;


		.banner {
			margin: 74rpx auto 28rpx auto;
			width: 706rpx;
			height: 362rpx;
			position: relative;

			&::after {
				content: '';
				background-size: 100% 100%;
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				pointer-events: none;
				width: 706rpx;
				height: 362rpx;
				// background: url('../../static/index/06.png');
				background-size: 100% 100%;
			}
		}

		.swiper {
			position: relative;
			height: 362rpx;
			border-radius: 10rpx;
			overflow: hidden;

			.swiper_item {
				width: 706rpx !important;
				height: 362rpx !important;
				border-radius: 10rpx;
				overflow: hidden;

				.swiper_image {
					width: 100%;
					height: 100%;
				}
			}

			z-index: 2;
		}


		.anniu_box {
			width: 100%;
			height: 196rpx;
			box-sizing: border-box;
			padding: 0 12rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 14rpx;

			.dange_an_box {
				width: 166rpx;
				height: 196rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.big_box {
			width: 742rpx;
			// height: calc(100vh - 686rpx);
			margin: auto;


			.box_item {
				// background-color: #fff;
				background: url("https://www.dingxians.cn/upload/images/index/bg-box.gif");

				width: 742rpx;
				height: 344rpx;
				background-size: 100% 100%; // 14016PX
				margin-bottom: 20rpx;
				display: flex;
				box-sizing: border-box;
				align-items: center;
				position: relative;

				.box_image {
					width: 95%;
					height: 95%;
					margin: auto;
					box-sizing: border-box;
				}

				.box-bottom {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 85rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: white;
					box-sizing: border-box;
					padding: 0 20rpx;

					.box-title {
						font-family: 'youshe', serif;
					}

					.box-info {
						text-align: center;

						.buy-btn {
							width: 128rpx;
							height: 44rpx;
							line-height: 44rpx;
							color: white;
							font-size: 20rpx;
							background: url("https://www.dingxians.cn/upload/images/index/btn-buy.png") 100%/100%;
						}

						.box-price {
							font-size: 18rpx;
						}
					}

				}
			}

			.image_box {
				width: 94%;
				height: 298rpx;
				margin: auto;
				// background-color: pink;
			}





			.mh_box {
				width: 742rpx;
				height: 344rpx;
				// background-image: url('../../static/index/mh.gif');
				// background-size: 100% 100%;
				margin-bottom: 8rpx;
				position: relative;

				image {
					width: 90%;
					height: 90%;
				}

				.name_box {
					position: absolute;
					left: 50rpx;
					bottom: 30rpx;
					font-family: 'youshe', serif;
					font-size: 32rpx;
					color: #fff;
				}

				.price_box {
					position: absolute;
					right: 50rpx;
					bottom: 30rpx;
					font-family: 'youshe', serif;
					font-size: 32rpx;
					color: #fff;
				}
			}
		}

	}





	.star {
		display: block;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: #FFF;
		top: 100px;
		left: 400px;
		position: relative;
		transform-origin: 100% 0;
		animation: star-ani 6s infinite ease-out;
		box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
		opacity: 0;
		z-index: 2;
	}

	.star:after {
		content: '';
		display: block;
		top: 0px;
		left: 4px;
		border: 0px solid #fff;
		border-width: 0px 90px 2px 90px;
		border-color: transparent transparent transparent rgba(255, 255, 255, .3);
		transform: rotate(-45deg) translate3d(1px, 3px, 0);
		box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
		transform-origin: 0% 100%;
		animation: shooting-ani 3s infinite ease-out;
	}

	.pink {
		top: 30px;
		left: 395px;
		background: #ff5a99;
		animation-delay: 5s;
		-webkit-animation-delay: 5s;
		-moz-animation-delay: 5s;
	}

	.pink:after {
		border-color: transparent transparent transparent #ff5a99;
		animation-delay: 5s;
		-webkit-animation-delay: 5s;
		-moz-animation-delay: 5s;
	}

	.blue {
		top: 35px;
		left: 432px;
		background: cyan;
		animation-delay: 7s;
		-webkit-animation-delay: 7s;
		-moz-animation-delay: 7s;
	}

	.blue:after {
		border-color: 'transpareanimation-delay: 12s';
		-webkit-animation-delay: 7s;
		-moz-animation-delay: 7s;
		animation-delay: 7s;
	}

	.yellow {
		top: 50px;
		left: 600px;
		background: #ffcd5c;
		animation-delay: 5.8s;
	}

	.yellow:after {
		border-color: transparent transparent transparent #ffcd5c;
		animation-delay: 5.8s;
	}

	@keyframes star-ani {
		0% {
			opacity: 0;
			transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
		}

		50% {
			opacity: 1;
			transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
			-webkit-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
			-moz-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
		}

		100% {
			opacity: 0;
			transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
			-webkit-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
			-moz-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
		}
	}
</style>